<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>好运网</title>
    <link rel="stylesheet" type="text/css" href="/css/basic.css"/>
    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="/css/center.css"/>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
    <link href="/css/public.css" rel="stylesheet" />
    <script src="../../js/dateJs.fei.js"></script>
</head>
<body>
<div th:include="header::header"></div>

<div class="main-zc">
    <form id="registerSubmit">
        <div class="w824">
            <div class="jkp"><img src="/images/hyw-29.png"> <img class="jkp-01" src="/images/hyw-30.png"></div>
            <div class="jkp-02">您在本公司注册账户所填写的一切信息，本公司将严格保密，绝不会向第三方提供。</div>
            <div class="jk-bg">
                <div class="bb-t"><i></i><span>个人资料</span><i></i></div>
                <div class="xun-01"><img src="/images/ico15.png">姓名：<input class="ti01 m10r m40l" name="lastName"
                                                                          placeholder="姓" type="text"><input
                        class="ti01" name="firstName" placeholder="名" type="text">
                </div>
                <div class="xun-02">* 姓名必须与您用于提款的银行账户姓名相同</div>
                <div class="xun-01"><img src="/images/ico16.png">出生年月：
                    <input class="date-time" placeholder="请选择您的出生日期" name="birthday" type="text" id="txt_calendar"
                           readonly="readonly" onfocus="showDate()">
                </div>
                <div class="xun-01">
                    <span class="fl"><img src="/images/ico17.png">性别：</span>
                    <div id="radiolist" class="fl m40l">
                        <input name="sex" style="width:20px; height:20px; vertical-align:middle" class="gjk"
                               type="radio" checked value="1">
                        <label>男</label>
                        <input name="sex" style="width:20px; height:20px;vertical-align:middle; margin-left:20px;"
                               type="radio" value="2">
                        <label>女</label>
                    </div>
                </div>
                <div class="bb-t"><i></i><span>账户信息</span><i></i></div>
                <div class="xun-01"><img src="/images/ico18.png">用户名：
                    <input class="usre-01" name="userName" placeholder="请输入你的用户名" type="text">
                </div>
                <div class="xun-02">* 用户名需要长度在6到12位数的小写英文字母和数字组成</div>
                <div class="xun-01"><img src="/images/ico19.png">密码：
                    <input class="usre-02" name="password" placeholder="请输入你的密码" type="password">
                </div>
                <div class="xun-01" style="margin-top:30px;"><img src="/images/ico20.png">确认密码：
                    <input class="usre-03" placeholder="请再次输入你的密码" name="repassword" type="password">
                </div>
                <div class="bb-t" style="margin-top:40px;"><i></i><span>联系资料</span><i></i></div>
                <div class="xun-01" style="margin-bottom:30px;"><img src="/images/ico21.png">邮箱：
                    <input class="usre-02" placeholder="请输入你的邮箱" name="email" type="text">
                </div>
                <div class="xun-01" style="margin-bottom:30px;"><img src="/images/ico22.png">手机号码：
                    <input class="usre-03" name="phone" placeholder="请输入你的手机号码" type="number" maxlength="11">
                </div>


                <div class="xun-01" style="margin-top:60px; position:relative;"><img src="/images/ico23.png"/>验证码：
                    <input class="usre-01" placeholder="请输入正确的验证码" name="verifyCode" type="text"/><a><img
                            id="changeCode" class="yzmpic" src="kaptcha"/></a>
                </div>

                <div class="tiaok"> <span>
          <input style="width:20px; height:20px; vertical-align:middle;" id="websiteTerms" type="checkbox">
          </span>
                    <p>我已年满18周岁，且已接受并同意<label style="color: #cc3333;">好运网的通用规则及条款</label>，并同意接受由好运网推送的相关邮件！</p>
                </div>
                <a class="zhuc" id="registerButton">立马注册</a> <span class="yzc">已有账号？<a href="javascript:void(0)" onclick="goToLogin()">马上登陆</a></span>
                <div class="xiatu">
                    <img src="/images/hyw-35.png">
                </div>
            </div>
        </div>
    </form>
</div>

<link rel="stylesheet" href="/js/loading/loading.css">
<script src="/js/loading/loading.js"></script>
<script>
    var jiuXiuLoad = new Loading();
    jiuXiuLoad.init();

    $("#changeCode").click(function () {
        $(this).attr("src", "kaptcha?1=" + Math.random())
    });

    $("#registerButton").click(function () {
        var websiteTerm = $('#websiteTerms').is(':checked');
        var curForm = $("#registerSubmit");
        var lastNameValue = curForm.find("input[name='lastName']").val();
        if (lastNameValue.length == 0) {
            alertWorning("您的姓不能为空!");
            return;
        }
        var firstNameValue = curForm.find("input[name='firstName']").val();
        if (firstNameValue.length == 0) {
            alertWorning("您的名字不能为空!");
            return;
        }
        var birthday = curForm.find("input[name='birthday']").val();
        if (birthday.length == 0) {
            alertWorning("您的生日不能为空!");
            return;
        }
        var sex = curForm.find("input[name='sex']").val();
        if (sex.length == 0) {
            alertWorning("您的性别不能为空!");
            return;
        }
        var userName = curForm.find("input[name='userName']").val();
        if (userName.length == 0) {
            alertWorning("您的用户名不能为空!");
            return;
        }
        var password = curForm.find("input[name='password']").val();
        if (password.length == 0) {
            alertWorning("您的密码不能为空!");
            return;
        }
        if (password.length < 6) {
            alertWorning("您的密码长度不能少于6位!");
            return;
        }
        var repassword = curForm.find("input[name='repassword']").val();
        if (repassword.length == 0) {
            alertWorning("您的密码不能为空!");
            return;
        }
        if (password != repassword) {
            alertWorning("您的确认密码输入错误!");
            return;
        }
        var email = curForm.find("input[name='email']").val();
        if (email.length == 0) {
            alertWorning("您的邮箱不能为空!");
            return;
        }
        var pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
        if (!pattern.test(email)) {
            alertWorning("您的邮箱格式错误!");
            return;
        }
        var phone = curForm.find("input[name='phone']").val();
        if (phone.length == 0) {
            alertWorning("您的手机号不能为空!");
            return;
        }
        if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(phone))) {
            alertWorning("不是完整的11位手机号或者正确的手机号前七位");
            return;
        }
        var verifyCode = curForm.find("input[name='verifyCode']").val();
        if (lastNameValue.length == 0) {
            alertWorning("您的验证码不能为空!");
            return;
        }

        if (websiteTerm) {
            jiuXiuLoad.start();
            $.ajax({
                method: "POST",
                url: "/api/register",
                data: curForm.serializeArray(),
                dataType: 'json'
            }).done(function (data) {
                jiuXiuLoad.stop();
                if (data.status == 'success') {
                    window.location.href = '/';
                } else {
                    alertWorning(data.data);
                }
            });
        } else {
            alertWorning("请同意本站协议！");
        }

    });

    function goToLogin() {
        window.scrollTo(0, 0);
        $(".login-menu").show();
    }
</script>
<div th:include="footer::footer"></div>
<div th:include="right::right"></div>
</body>
</html>
